<template>
  <div class="app-tag">
    <!-- {{ useStore.customerInfo }} -->
    <!-- 游客建档 三个tag -->
    <ul class="tag-list" @click="handleTagClick">
      <li
        class="customer"
        :class="{
          'tag-activate': route.name == 'customer_info',
        }"
        :data-id="1"
        data-route="customer_info"
      >
        <div class="customer-box">
          <div class="min-w-[4rem]">当前客户:</div>
          <el-text
            type="success"
            truncated
            class="customer-name text-[black] text-[0.9rem]"
            :class="{
              'tag-activate2': route.name == 'customer_info',
            }"
            :title="useStore.customerInfo.customerName || '访客'"
          >
            {{ useStore.customerInfo.customerName || "访客" }}
          </el-text>
          <el-button
            type="warning"
            size="small"
            class="ml-1"
            @click="changeCustomer_btn"
          >
            选择客户
          </el-button>
        </div>
      </li>
      <li
        class="max-w-[10rem]"
        :class="{
          'tag-activate': route.name == 'face_scan',
        }"
        :data-id="2"
        data-route="face_scan"
      >
        人脸扫描
      </li>
      <li
        class="max-w-[10rem]"
        :class="{
          'tag-activate': route.name == 'optometrist',
        }"
        :data-id="3"
        data-route="optometrist"
      >
        配镜试戴
      </li>
      <li
        class="max-w-[10rem]"
        :class="{
          'tag-activate': route.name == 'try_in_3D',
        }"
        :data-id="4"
        data-route="try_in_3D"
      >
        3D试戴
      </li>
      <!-- <li>
        <LogOut />
      </li> -->
    </ul>

    <el-scrollbar
      height="var(--main-height)"
      class="mt-1 bg-[#f8f8f8] rounded overflow-auto"
    >
      <!-- 三级出口 -- 检查模式 -->
      <!-- <router-view /> -->
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </el-scrollbar>

    <el-drawer
      v-model="customer_drawer"
      direction="rtl"
      size="70%"
      title="选择当前客户"
      destroy-on-close
    >
      <change-customer @handleBack="handleBack" />
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { ElAvatar, ElMessage, ElMessageBox } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "@/pinia";

import ChangeCustomer from "@/components/ChangeCustomer.vue";
import LogOut from "@/view/Logout/index.vue";

onMounted(() => {});

const route = useRoute();
const router = useRouter();
const useStore = useUserStore();

const handleTagClick = (e) => {
  const tagElement = e.target.closest("li");

  if (tagElement) {
    const tag_route = tagElement.getAttribute("data-route");
    router.push({ name: tag_route });
  }
};

// 选择客户
const customer_drawer = ref(false);
const changeCustomer_btn = () => {
  customer_drawer.value = true;
};
const handleBack = () => {
  customer_drawer.value = false;
};
</script>

<style scoped lang="scss">
.app-tag {
  @apply text-[0.8rem] mt-[0.2rem];
}

.tag-list {
  @apply w-full h-[var(--nav-height)] flex items-center px-2;
  li {
    @apply w-[15%]  h-full mr-[1rem] text-[var(--theme-font-color)] border-[0.1rem] border-solid border-[#dce6f1] rounded-lg flex items-center justify-center overflow-hidden;
    &:hover {
      @apply cursor-pointer bg-[var(--theme-hover-bg-color)] text-white border-[var(--theme-hover-bg-color)];
      border-color: var(--theme-hover-bg-color) !important;
    }
  }
  li:first-child {
    max-width: 15rem !important;
    @apply w-[26%];

    .customer-box {
      @apply w-full h-full flex items-center justify-between px-1 box-border;
    }
  }
}

.tag-activate {
  @apply bg-[var(--theme-color)] text-white;
  border-color: white !important;
  color: white !important;
}
.tag-activate2 {
  @apply text-white;
  border-color: white !important;
  color: white !important;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>